<template>
	<view class="container">
		<view class='none' v-if="result.length==0"><image style="width:40upx;height: 40upx;" src="../../static/images/address.png"></image>没有地址，马上添加</view>
		<block v-else>
			<radio-group @change="radio_change">
				<view class="address_unit" v-for="(item,index) in result" :key="index">
					<!-- <image style="height: 50upx;width:90upx;" src="../../static/images/delete.png"></image> -->
					<view class="address_con" :id="item.address_id" v-on:click="change_status">
						<view class="address_property">
							<view class="contact">{{item.addr_name}}</view>
							<view class="phone">{{item.addr_phone}}</view>
							<view class="default" v-if="item.addr_status==1">默认地址</view>
						</view>
						<view class="address_detail"><image src="../../static/images/address.png"></image>{{item.address}}</view>
					</view>
					<view class='operation'>
						<block v-if="order_id==0">
							<radio class="radio_select" color="#3DE9C7" checked="true" :value="item.address_id" v-if="item.addr_status==1">设为默认地址</radio>
							<radio class="radio_select" :value="item.address_id" v-else>设为默认地址</radio>
						</block>
						<block v-else>
							<radio :value="item.address_id" checked="true" v-if="index==0">设为默认地址</radio>
							<radio :value="item.address_id" v-else>设为默认地址</radio>
						</block>
						<view class="operation_unit">
							<view class="delete" :id="item.address_id" v-on:click="delete_address">删除</view>
							<view class="modify" :id="item.address_id" v-on:click="modify_address">完善地址</view>
						</view>
					</view>
				</view>
			</radio-group>
		</block>
		<view class="lh"></view>
		<view class="mask" v-show="display==1" :style="{width:w,height:h}" v-on:click="close_dialog"></view>
		<view class="add" v-show="display==1">
			<view class="add_address">添加地址</view>
			<!--#ifdef MP-WEIXIN -->
			<view class='title'>
			  <view class='input_label'>请选择城区</view>
			  <picker mode="region" :value="region" @change="select_district" :custom-item="customItem" class="picker" style="padding-left:2%;width:73%;height: 50upx;border:1px solid #CCCCCC;border-radius: 10upx;">
					<text class="district">{{region[0]}}</text>
					<text class="district">{{region[1]}}</text>
					<text class="district">{{region[2]}}</text>
			  </picker>
			</view>
			<!--#endif -->
			<!--#ifdef APP-PLUS -->
			<view class='title'>
			  <view class='input_label'>请选择城区</view>
			  <view class="area" v-on:click="select_district">{{area}}</view>
			</view>
			<!--#endif -->
			<!--#ifdef H5 -->
			<view class='title'>
			  <view class='input_label'>请选择城区</view>
			  <view class="area" v-on:click="select_district">{{area}}</view>
			</view>
			<!--#endif -->
			<view class='title'>
			  <view class='input_label'>详细地址</view>
			  <input class='input_text' placeholder='输入详细地址' :value="address" data-name="address" @input="input_"></input>
			</view>
			<view class='title'>
			  <view class='input_label'>联系人</view>
			  <input class='input_text' placeholder='输入联系人' :value="name" data-name="name" @input="input_"></input>
			</view>
			<view class='title'>
			  <view class='input_label'>联系方式</view>
			  <input type='number' class='input_text' placeholder='输入联系方式' :value="phone" data-name="phone" @input="input_"></input>
			</view>
			<view class='button' :data-status="status" v-on:click='address_submit'>确认添加</view>
		</view>
		<view class="add_new"  v-on:click='add_address' v-show="display==0">添加新地址</view>
	</view>
</template>
<style>
	page{background: #F1F1F1;}
	.container{width: 100%;}
	.none{width:100%;height:80upx;font-size:28upx;background:#FFFFFF;display: flex;justify-content: center;align-items: center;}
	.address_unit{width:92%;padding:0 2% 15upx 2%;margin:20upx 2%;
			border-radius: 10upx;overflow: hidden;display: flex;justify-content: space-between;align-items: center;flex-direction: column;background-color: #FFFFFF;}
	.address_con{width:100%;display:flex;flex-direction:column;padding:15upx 3%;justify-content: space-between;align-items: flex-start;}
	.address_property{width:100%;display: flex;justify-content:flex-start;align-items: center;height: 50upx;}
	.contact{font-size: 28upx;padding-right:10upx;font-weight: bold;}
	.phone{font-size: 24upx;padding-left:10upx;color: #999999;}
	.address_detail{width:100%;font-size: 28upx;display:flex;justify-content: flex-start;align-items: center;line-height: 50upx;}
	.address_detail image{width:40upx;height:40upx;}
	.operation{width:100%;padding:0;height: 60upx;display: flex;justify-content: space-between;align-items:center;}
	.operation_unit{height: 60upx;display: flex;justify-content: flex-end;align-items:center;}
	.default{border:1px solid #3de9c7;color: #3de9c7;padding:0 15upx;text-align: center;margin:0 10upx;
			height: 40upx;line-height: 40upx;border-radius: 10upx;font-size:26upx;}
	.current{border:1px solid #3de9c7;color: #3de9c7;width:95%;text-align: center;line-height: 50upx;border-radius: 10upx;font-size:26upx;}
	.radio_select{font-size: 32upx;color: #666666;transform: scale(0.9);/* background-image: linear-gradient(#43eac9, #24c3a4); */}
	/*******************************/
	.add_address{width:94%;padding:10rpx 3%;display: flex;justify-content:flex-start;align-items:center;color: #666666;background: #FFFFFF;}
	.title{width:94%;padding:10rpx 3%;display: flex;justify-content:space-between;background: #FFFFFF;}
	.input_label{width:25%;height:70rpx;line-height: 70rpx;font-size:26rpx;}
	/* .picker{display: flex;justify-content: space-between;align-items: center;} */
	.area{padding-left:2%;width:73%;height: 70upx;line-height: 70upx;border:1px solid #CCCCCC;font-size: 28upx;color: #999999;border-radius: 10upx;}
	.district{padding-right:50upx;font-size:26rpx;}
	.district:last-child{padding:0;}
	.input_text,.lbs{width:72%;height:70rpx;line-height: 70rpx;font-size:26rpx;border:1px solid #d1d1d1;border-radius: 10rpx;padding-left:2%;}
	.add{position: fixed;bottom:0;z-index: 999999;width:100%;background: #FFFFFF;}
	.button{width:94%;margin:10rpx 3% 0 3%;left:0;background-image: linear-gradient(#43eac9, #24c3a4);color:#ffffff;font-size: 30rpx;
	text-align: center;height:100upx;line-height: 100upx;border-radius: 10rpx;}
	.add_new{width:94%;margin:10rpx 3% 0 3%;left:0;background-image: linear-gradient(#43eac9, #24c3a4);color:#ffffff;font-size: 30rpx;position: fixed;bottom: 0;left:0;
	text-align: center;height:100upx;line-height: 100upx;border-radius: 10rpx;}
	.modify{background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;text-align: center;height: 50upx;line-height: 50upx;padding:0 15upx;margin:0 10upx;
	        border-radius: 10upx;font-size:26upx;}
	.delete{color: #999999;border:1px solid #999999;text-align: center;height: 50upx;line-height: 50upx;padding:0 15upx;margin:0 10upx;
	        border-radius: 10upx;font-size:26upx;}
	.lh{width:100%;height: 120upx;}
	/************************************/
	.mask{z-index: 999;background: #000;opacity: 0.6;position: fixed;top:0;}
	/* .dialog{z-index: 9999;background: #FFFFFF;position: fixed;bottom:0;width:100%;border-radius: 20upx 20upx 0 0;} */
</style>
<script>
	export default {
		data() {
			return {
				result:[],
				id:0,
				region:['---','点击此处选择','---'],
				area:'点击选择省市区域',
				name:'',
				address:'',
				phone:'',
				w:'',
				h:'',
				status:0,
				display:0,
				order_id:0,
				goods_id:0,
				type:'',
				type_status:"order",
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.pic_h = w*0.96*0.3+"px";
			this.w = w+"px";
			this.h = res.windowHeight+"px";
			console.log("order_id:"+e.order_id);
			if(e.order_id!=undefined)
			{
				this.order_id = parseInt(e.order_id);
			}
			if(e.type!=undefined)
			{
				this.type_status = e.type;
				if(e.type=="goods")
				{
					this.goods_id = e.goods_id;
				}
				if(e.type=="order")
				{
					this.order_id = parseInt(e.order_id);
				}
			}
			console.log("this.order_id:"+this.order_id);
			this.initialize();
		},
		//#ifdef H5
		onBackPress(options) 
		{
			alert(options.from);
			if (options.from === 'navigateBack'|| options.from=='backbutton')
			{
				if(this.order_id!=0)
				{
					// alert(member_id+"\n"+this.order_id);
					// var member_id = uni.getStorageSync("member_id");
					// window.location.href = 'https://zhangjie.jdmuguzhid.com/order?member_id='+member_id+'&order_id='+this.order_id
					window.location.href = document.referrer
				}
				return true;  
			}
			else
			{
				
			}
		}, 
		//#endif
		onShow()
		{
			//#ifdef APP-PLUS
			this.initialize();
			var regin = uni.getStorageSync("regin");
			if(regin.length>5)
			{
				this.area = regin;
				uni.removeStorageSync("regin");
			}
			//#endif
			//#ifdef H5
			this.initialize();
			var regin = uni.getStorageSync("regin");
			if(regin.length>5)
			{
				this.area = regin;
				uni.removeStorageSync("regin");
			}
			//#endif
		},
		methods: {
			radio_change:function(e)
			{
				var address_id = e.detail.value;
				uni.setStorageSync("address_id",address_id);
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: this.url+'/wechat_update_address', 
					data: {id:address_id,member_id:member_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						if(res.data.status==1)
						{
							uni.showToast({
								title:"更新成功",
								duration:2000
							})
							for(var i=0;i<that.result.length;i++)
							{
								that.result[i].addr_status = 0;
								if(parseInt(id)==that.result[i].address_id)
								{
									that.result[i].addr_status = 1;
								}
							}
							for(var i=0;i<that.result.length;i++)
							{
								if(that.result[i].addr_status==1)
								{
									uni.setStorageSync("address_id",that.result[i].address_id);
								}
							}
						}
						else
						{
							uni.showToast({
								title:"系统忙",
								duration:2000
							})
						}
					}
				});
			},
			add_address:function()
			{
				this.display = 1;
			},
			close_dialog:function()
			{
				this.display = 0;
			},
			select_district:function(event)
			{
				//#ifdef MP-WEIXIN
				this.region = event.detail.value;
				//#endif
				//#ifdef APP-PLUS
				console.log("appapp");
				uni.navigateTo({url:'select_city'})
				//#endif
				//#ifdef H5
				console.log("appapp");
				uni.navigateTo({url:'select_city'})
				//#endif
			},
			delete_address:function(e)
			{
				var id = e.currentTarget.id;
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.showModal({
					title:"操作提示",
					content:"确认要删除该地址？",
					success:function(result){
						if(result.confirm)
						{
							uni.request({
								url: that.url+'/wechat_delete_address', 
								data: {id:id,member_id:member_id},
								header: {'Content-Type': 'application/json'},
								success: (res) => {
									if(res.data.status==1)
									{
										uni.showToast({
											title:"操作成功",
											duration:2000
										})
										for(var i=0;i<that.result.length;i++)
										{
											if(parseInt(id)==that.result[i].address_id)
											{
												that.result.splice(i,1);
											}
										}
										if(res.data.address_id==0)
										{
											uni.removeStorageSync("address_id");
										}
										else
										{
											uni.setStorageSync("address_id",res.data.address_id);
										}
									}
									else
									{
										uni.showToast({
											title:"系统忙",
											duration:2000
										})
									}
								}
							});
						}
					}
				})
				
			},
			modify_address:function(e)
			{
				var id = e.currentTarget.id;
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				this.id = id;
				for(var i=0;i<this.result.length;i++)
				{
					if(parseInt(id)==this.result[i].address_id)
					{
						this.name  = this.result[i].addr_name;
						this.phone = this.result[i].addr_phone;
						var tmp    = this.result[i].address.split("--");
						this.address = tmp[1];
					}
				}
				this.display = 1;
			},
			change_status:function(e)
			{
				var id = e.currentTarget.id;
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: this.url+'/wechat_update_address', 
					data: {id:id,member_id:member_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						if(res.data.status==1)
						{
							uni.showToast({
								title:"更新成功",
								duration:2000
							})
							for(var i=0;i<that.result.length;i++)
							{
								that.result[i].addr_status = 0;
								if(parseInt(id)==that.result[i].address_id)
								{
									that.result[i].addr_status = 1;
								}
							}
							for(var i=0;i<that.result.length;i++)
							{
								if(that.result[i].addr_status==1)
								{
									uni.setStorageSync("address_id",that.result[i].address_id);
								}
							}
						}
						else
						{
							uni.showToast({
								title:"系统忙",
								duration:2000
							})
						}
					}
				});
			},
			address_submit:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				//#ifdef MP-WEIXIN
				var address = this.region[0]+'-'+this.region[1]+'-'+this.region[2]+'--'+this.address;
				//#endif
				//#ifdef APP-PLUS
				var address = this.area+'--'+this.address;
				//#endif
				//#ifdef H5
				var address = this.area+'--'+this.address;
				//#endif
				// uni.showModal({
				// 	title:"测试",
				// 	content:address,
				// 	showCancel:false
				// })
				// return;
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!reg_tel.test(this.phone))
				{
					uni.showToast({
						title:'不是有效的手机号码',
						duration:1000
					})
				}
				else if(this.name.length<2)
				{
					uni.showToast({
						title:'姓名不能为空',
						duration:1000
					})
				}
				//#ifdef MP-WEIXIN
				else if(this.region[0]=="---")
				{
					uni.showToast({
						title:'区域不能为空',
						duration:1000
					})
				}
				//#endif
				//#ifdef APP-PLUS || H5
				else if(this.area.length<5)
				{
					uni.showToast({
						title:'区域不能为空',
						duration:1000
					})
				}
				//#endif
				else if(this.address.length==0)
				{
					uni.showToast({
						title:'地址不能为空',
						duration:1000
					})
				}
				else
				{
					// console.log(this.id);
					// console.log(this.name);
					// console.log(this.phone);
					// console.log(this.address);
					// return;
					uni.request({
						url: this.url+'/wechat_add_address', 
						data: {id:this.id,name:this.name,phone:this.phone,address:address,member_id:member_id},
						header: {'Content-Type': 'application/json'},
						success: (res) => {
							if(res.data.status==1)
							{
								uni.showToast({
									title:"添加成功",
									duration:2000
								})
								that.result.push(res.data.result);
								that.name = '';
								that.phone = '';
								that.address="";
								that.region = ['---','点击此处选择','---'];
								that.area    = '点击选择省市区域';
								that.display = 0;
								// uni.showModal({
								// 	title:"test",
								// 	content:that.order_id+"\r\n"+that.type_status+"\r\n"+that.goods_id
									
								// })
								// return;
								if(that.order_id>0)
								{
									uni.redirectTo({url:"/pages/mall/order?order_id="+that.order_id})
								}
								if(that.type_status=="goods")
								{
									if(that.goods_id!=0)
									{
										uni.redirectTo({url:"/pages/mall/goods_detail?type=order&id="+that.goods_id})
									}
								}
								if(that.type_status=="order")
								{
									if(that.order_id>0)
									{
										uni.redirectTo({url:"/pages/mall/order?order_id="+that.order_id})
									}
								}
								if(that.type_status=="cart")
								{
									uni.redirectTo({url:"/pages/mall/cart"})
								}
							}
							if(res.data.status==0)
							{
								uni.showToast({
									title:"系统忙",
									duration:2000
								})
							}
							if(res.data.status==2)
							{
								uni.showToast({
									title:"完善成功",
									duration:2000
								})
								for(var i=0;i<that.result.length;i++)
								{
									if(parseInt(that.id)==that.result[i].address_id)
									{
										that.result[i].addr_name  = that.name;
										that.result[i].addr_phone = that.phone;
										that.result[i].address    = address;
									}
								}
								that.name = '';
								that.phone = '';
								that.address="";
								that.region = ['---','点击此处选择','---'];
								that.area    = '点击选择省市区域';
								that.display = 0;
							}
							for(var i=0;i<that.result.length;i++)
							{
								if(that.result[i].addr_status==1)
								{
									uni.setStorageSync("address_id",that.result[i].address_id);
								}
							}
						}
					});
				}
			},
			initialize:function()
			{
				var member_id = uni.getStorageSync("member_id");
				// var member_id = 169841;
				var that = this;
				uni.request({
					url: this.url+'/wechat_get_address', 
					data: {member_id:member_id,type:1},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res.data);
						if(res.data.status==1)
						{
							that.result  = res.data.result;
							for(var i=0;i<res.data.result.length;i++)
							{
								if(res.data.result[i].addr_status==1)
								{
									uni.setStorageSync("address_id",res.data.result[i].address_id);
								}
							}
						}
					}
				});
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="phone")
				{
					this.phone = e.target.value;
					uni.setStorageSync("tel",this.phone);
				}
				if(e.currentTarget.dataset.name=="name")
				{
					this.name = e.target.value;
					uni.setStorageSync("name",this.name);
				}
				if(e.currentTarget.dataset.name=="address")
				{
					this.address = e.target.value;
					uni.setStorageSync("address",this.address);
				}
			}
		}
	}
</script>


